<template>
	<view>
		<z-nav-bar
			:bgColor="['#3699ff', '#0075ee']"
			bgColorAngle="90"
			fontColor="#FFF"
			homeState="2000"
			backState="1000">
			<view class="title-box"
				><text>{{ title }}</text></view
			>
		</z-nav-bar>
		<!-- 顶部 -->
		<u-sticky :offsetTop="offsetTop">
			<view class="topWrapper">
				<view class="searchBox">
					<view class="search">
						<u--input
							:value="inputValue"
							clearable
							border="none"
							fontSize="12"
							placeholder="请输入客户名称/车牌号搜索"
							@blur="isSearch = false"
							@focus="isSearch = true"
							@change="searchChange"
							prefixIcon="search"
							prefixIconStyle="font-size: 22px;color: #909399" />
					</view>

					<view style="display: flex" @click="showStatus = !showStatus">
						<text class="city">{{ sourceName }}</text>
						<u-icon :name="showStatus ? 'arrow-up' : 'arrow-down'" color="#fff" size="14"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>
		<mescroll-body
			id="mescroll"
			ref="mescrollRef"
			@init="mescrollInit"
			@down="downCallback"
			@up="upCallback">
			<view class="item" v-for="(item, index) in orderList" :key="item.orderNo">
				<view @click.stop="jumpPage('orderDetail', index)">
					<view class="flex-row-center-sb" style="justify-content: flex-start">
						<text class="title">订单号:{{ item.orderNo | filterNull }}</text>
						<text class="order-source">{{ getSourceName(item.orderSource) }}</text>
						<text style="flex: 1"></text>
						<text
							style="color: #00bfbf; max-width: 300rpx; margin-right: 20rpx; font-size: 28rpx"
							v-if="item.orderStatus != 0"
							>{{ item.orderStatus | shortOrderStatus }}</text
						>
						<text
							style="color: #00bfbf; max-width: 300rpx; margin-right: 20rpx; font-size: 28rpx"
							v-else
							>{{ item.rentPayType | rentPayType }}-{{ item.orderStatus | shortOrderStatus }}</text
						>
					</view>

					<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>

					<view class="text-line">
						<text class="text-name">预定车型:</text>
						<text class="text-value">
							{{ item.modelName | filterNull }}
						</text>
					</view>
					<view class="text-line flex-row-center">
						<text class="text-name">车牌号:</text>
						<text class="text-value" style="margin-right: 20rpx">{{
							item.carNo | filterNull
						}}</text>
					</view>
					<view class="text-line flex-row-center">
						<text class="text-name">客户信息:</text>
						<text class="text-value" style="margin-right: 20rpx"
							>{{ item.memberName | filterNull }} {{ item.memberPhone | filterNull }}</text
						>
						<view @click.stop="callPhone(item.memberPhone)">
							<u-icon name="phone-fill" color="#1673FF"></u-icon>
						</view>
					</view>
					<view v-if="item.labels" class="text-line flex-row-center">
						<text class="text-name">订单标签:</text>
						<view class="text-value" style="margin-right: 20rpx">{{
							formatLabel(item.labels)
						}}</view>
					</view>
					<view class="text-line flex-row-center">
						<text class="text-name">订单说明:</text>
						<view class="text-value-order">{{ item.lastOrderRemark | filterNull }}</view>
					</view>

					<view class="text-line">
						<text class="text-name">取还信息:</text>
						<view class="text-value flex-row-center">
							<text
								style="
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									max-width: 250rpx;
								"
								>{{ item.reserveTakeStoreName | filterNull }}</text
							>
							<text style="margin: 16rpx">--</text>
							<text
								style="
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									max-width: 250rpx;
								"
								>{{ item.reserveAlsoStoreName | filterNull }}</text
							>
						</view>
						<!-- <text class="text-value">{{item.reserveTakeStoreName|filterNull}} -- {{item.reserveAlsoStoreName|filterNull}}</text> -->
					</view>
					<view>
						<view class="text-line">
							<view class="text-value start-time"
								>预取:{{ item.rentalStartTime | filterNull }}</view
							>
							<view class="text-value end-time">预还:{{ item.rentalEndTime | filterNull }}</view>
						</view>
					</view>

					<view>
						<view class="text-line">
							<view class="text-value start-time" v-if="item.actualStartTime">
								实取:{{ item.actualStartTime }}</view
							>
							<view class="text-value end-time" v-if="item.actualEndTime"
								>实还:{{ item.actualEndTime }}
							</view>
						</view>
					</view>
				</view>
				<u-line color="#efefef" margin="0 0 10rpx 0"></u-line>
				<view style="display: inline-flex; justify-content: flex-end">
					<template v-if="item.orderClassify == 1">
						<view class="btn-detail" @click="jumpPage('orderDetail', index)"> 订单详情 </view>
					</template>
					<template v-else>
						<view
							class="btn-detail"
							@click="jumpPage('carOperation', index)"
							v-if="(item.orderStatus == 3 || item.orderStatus == 4) && item.control == 1">
							车辆操作
						</view>
						<view
							class="btn-detail"
							@click="jumpPage('staffAllocation', index)"
							v-if="item.orderStatus <= 1 && checkPermi(['order:orderBasic:distribution'])"
							>订单分配</view
						>
						<view
							class="btn-detail"
							@click="jumpPage('carAllocation', index)"
							v-if="item.orderStatus == 2 && checkPermi(['order:orderBasic:supplyCar'])"
							>订单排车</view
						>
						<view
							class="btn-detail"
							@click="jumpPage('deliveryAndInspection', index)"
							v-if="item.orderStatus == 3 && checkPermi(['order:orderBasic:delivery'])"
							>交车验车</view
						>
						<view
							class="btn-detail"
							@click="jumpPage('returnTheCarForInspection', index)"
							v-if="item.orderStatus == 4 && checkPermi(['order:orderBasic:alsoCarTest'])"
							>还车验车</view
						>
						<view
							class="btn-detail"
							@click="jumpPage('carDamageSettlement', index)"
							v-if="item.orderStatus == 5"
							>车损结算</view
						>
						<view
							class="btn-detail"
							@click="jumpPage('depositSettlement', index)"
							v-if="item.orderStatus == 6 && checkPermi(['order:orderBasic:depositRefund'])"
							>押金结算</view
						>
						<view
							class="btn-detail"
							@click="jumpPage('illegalProcessing', index)"
							v-if="item.orderStatus == 7">
							违章处理</view
						>
						<view
							class="btn-detail"
							@click="jumpPage('illegalSettlement', index)"
							v-if="item.orderStatus == 8 && checkPermi(['order:orderBasic:IllegalProcessing'])"
							>违章结算</view
						>
						<view
							class="btn-detail"
							@click="paymentFee(item.orderNo)"
							v-if="
								item.orderStatus != 10 &&
								checkPermi(['order:orderBasic:paymentOfFees']) &&
								item.unpaidAmount > 0
							">
							费用缴纳</view
						>
					</template>
				</view>
			</view>
		</mescroll-body>

		<u-popup :show="showPayCost" mode="center" @close="showPayCost = false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx">
				<view style="margin-bottom: 30rpx">请选择缴纳费用项</view>
				<view
					class="flex-row-center-sb payCostItem"
					v-for="(item, index) in payCostList"
					:key="index"
					@click="changeCostItem(item)">
					<text>{{ item.remark }}</text>
					<view class="flex-row-center">
						<text style="color: red; margin-right: 10rpx">待付:{{ item.unpaidAmount }}元</text>
						<image
							style="width: 40rpx; height: 40rpx"
							:src="
								item.selected == true
									? '/static/other/radio_selected.png'
									: '/static/other/radio_default.png'
							"
							mode=""></image>
					</view>
				</view>

				<view class="flex-row-center-sb" style="margin-top: 40rpx; width: 80%">
					<view
						class="alertBtn"
						style="background-color: #f8f8f8; color: #bfc3cc"
						@click="showPayCost = false">
						取消</view
					>
					<view class="alertBtn" @click="confimPayFee">确定</view>
				</view>
			</view>
		</u-popup>

		<!-- 新增费用弹框 -->
		<u-popup :show="showPopCost" mode="bottom" @close="showPopCost = false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx 20rpx">
				<view style="margin-bottom: 30rpx">新增收费项</view>
				<uni-forms ref="form">
					<uni-forms-item label="收费项名称" labelWidth="90" required>
						<view>
							<u--input
								v-model="customCost.chargeProjectName"
								placeholder="请输入收费项名称"></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="收费类型" required>
						<uni-data-checkbox v-model="customCost.chargeItemsType" :localdata="chargeItemsTypes" />
					</uni-forms-item>

					<uni-forms-item label="单价" labelWidth="90" required>
						<view>
							<u--input
								v-model="customCost.unitPrice"
								type="number"
								placeholder="请输入单价"></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="数目" labelWidth="90" required>
						<view>
							<u--input
								v-model="customCost.number"
								type="number"
								placeholder="请输入数量"></u--input>
						</view>
					</uni-forms-item>

					<uni-forms-item label="费用合计" labelWidth="90">
						<view>
							<text style="position: relative; top: 15rpx">{{
								customCost.number * customCost.unitPrice || "0"
							}}</text>
						</view>
					</uni-forms-item>
				</uni-forms>

				<view class="commitBtn" @click="commitCost">提交</view>
			</view>
		</u-popup>

		<view
			v-if="showStatus"
			class="filterPop"
			@click="showStatus = false"
			:style="[{ top: popTop }]"
			@touchmove.stop.prevent="preventTouchMove">
			<view @click.stop="" class="filterContent">
				<view class="filter-content">
					<text
						class="filter-item"
						:class="item.check ? 'active' : ''"
						v-for="(item, index) in sourceList"
						:key="index"
						@click.stop="sourceClick(index)">
						{{ item.dictLabel }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { dictdatatype } from "@/api/car-api.js";
	import { getAllLabel } from "@/api/home-api.js";
	import * as api from "@/api/order-api.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				sourceName: "订单来源",
				showStatus: false,
				popTop: this.StatusBar + this.CustomBar + 36 + "px",
				showPayCost: false,
				inputValue: "",
				orderType: "",
				orderTypeName: "",
				isSearch: false,
				list: [
					{
						name: "全部",
						status: 1,
					},
					{
						name: "待支付",
						status: 2,
					},
					{
						name: "待分配",
						status: 3,
					},
					{
						name: "待排车",
						status: 4,
					},
					{
						name: "待取车",
						status: 5,
					},
					{
						name: "用车中",
						status: 6,
					},
					{
						name: "结算中",
						status: 7,
					},

					{
						name: "已完成",
						status: 8,
					},
					{
						name: "已取消",
						status: 9,
					},
				],
				status: 100,
				title: "",
				orderList: [],
				//代缴纳费用项
				payCostList: [],
				currentPayItem: null,
				currentOrderNo: "",
				showPopCost: false,
				chargeItemsTypes: [
					{
						value: 1,
						text: "按次",
					},
					{
						value: 2,
						text: "按天",
					},
					// {
					// 	value: 3,
					// 	text: '按里程'
					// }
				],
				customCost: {
					chargeProjectName: "",
					chargeMoney: "",
					chargeItemsType: 1,
					canEdit: 3,
					number: "1",
					unitPrice: "",
				},
				sourceList: [],
				orderSource: "",
				labelList: [],
			};
		},
		computed: {
			offsetTop() {
				return (
					uni.getSystemInfoSync()["statusBarHeight"] +
					(92 / 750) * uni.getSystemInfoSync().windowWidth -
					0.5
				);
			},
		},
		onReady() {
			//监听筛选组件距离顶部的距离
			const query = uni.createSelectorQuery();
			query.select("#mescroll").boundingClientRect();
			query.exec((res) => {
				this.popTop = res[0].top + "px";
			});
		},
		onLoad(op) {
			this.status = op.status;
			this.title = op.title;
			uni.$on("refreshOrder", (data) => {
				this.mescroll.triggerDownScroll();
			});

			this.getSourceData();
			this.getLabels();
		},
		methods: {
			getLabels() {
				getAllLabel().then((res) => {
					this.labelList = res.data || [];
				});
			},
			getSourceData() {
				dictdatatype("sys_order_source").then((res) => {
					this.sourceList = [
						{
							dictLabel: "全部",
							dictValue: "",
						},
						...res.data,
					];
				});
			},
			formatLabel(labels) {
				return this.labelList
					.filter((item) => {
						return labels?.split(",").indexOf(item.id + "") >= 0;
					})
					.map((i) => {
						return i.name;
					})
					.join(",");
			},
			upCallback(page) {
				var param = {
					keyWord: this.inputValue,
					pageNum: page.num,
					pageSize: page.size,
					type: this.status,
					orderSource: this.orderSource,
				};
				api
					.apiOrderBasicList(this.toParams(param))
					.then((res) => {
						//设置列表数据
						if (page.num == 1) this.orderList = []; //如果是第一页需手动制空列表
						this.orderList = this.orderList.concat(res.rows); //追加新数据
						this.mescroll.endBySize(res.rows.length, res.total);
					})
					.catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					});
				this.mescroll.endSuccess();
			},

			//搜索
			searchChange(value) {
				this.inputValue = value;
				this.mescroll.triggerDownScroll();
			},
			// 拨打电话
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			jumpPage(path, index) {
				const orderItemInfo = this.orderList[index];
				var item = {
					...orderItemInfo,
					carId: orderItemInfo.carId,
					orderNo: this.orderList[index].orderNo,
					memberName: this.orderList[index].memberName,
					orderStatus: this.orderList[index].orderStatus,
					memberType: this.orderList[index].memberType,
					memberPhone: this.orderList[index].memberPhone,
					carNo: this.orderList[index].carNo,
					modelName: this.orderList[index].modelName,
					rentalStartTime: this.orderList[index].rentalStartTime,
					rentalEndTime: this.orderList[index].rentalEndTime,
					actualStartTime: this.orderList[index].actualStartTime,
					actualEndTime: this.orderList[index].actualEndTime,
					yjbj: this.orderList[index].yjbj,
					wzbj: this.orderList[index].wzbj,
					reserveTakeStoreId: this.orderList[index].reserveTakeStoreId,
					reserveAlsoStoreId: this.orderList[index].reserveAlsoStoreId,
				};
				// 判断车辆押金|违章押金是否结清
				if (path == "depositSettlement" || path == "illegalSettlement") {
					var param = "";
					if (path == "depositSettlement") {
						param = item.orderNo + "/1";
					} else {
						param = item.orderNo + "/2";
					}
					api.orderCostIspay(param).then((res) => {
						if (res.data.code == 1) {
							uni.showModal({
								title: "提示",
								content: res.data.title,
								cancelText: "取消",
								confirmText: "确认结算",
								success: (res) => {
									if (res.confirm) {
										uni.navigateTo({
											url:
												"/order/shortOrder/" +
												path +
												"?item=" +
												encodeURIComponent(JSON.stringify(item)),
										});
									}
								},
							});
						} else {
							uni.navigateTo({
								url:
									"/order/shortOrder/" + path + "?item=" + encodeURIComponent(JSON.stringify(item)),
							});
						}
					});
				} else if (orderItemInfo.orderClassify == 1) {
					console.log("-----", orderItemInfo.orderClassify);
					uni.navigateTo({
						url:
							"/order/shortOrder/otaOrderDetail" +
							"?item=" +
							encodeURIComponent(JSON.stringify(item)),
					});
				} else {
					uni.navigateTo({
						url: "/order/shortOrder/" + path + "?item=" + encodeURIComponent(JSON.stringify(item)),
					});
				}
			},
			//费用缴纳按钮
			paymentFee(orderNo) {
				this.currentOrderNo = orderNo;
				this.currentPayItem = null;
				this.payCostList = [];
				api.getAllPaymentOfFees(orderNo).then((res) => {
					let data = res.data;
					data.map((item) => {
						if (item.unpaidAmount > 0 && item.payStatus == 1) {
							this.payCostList.push(item);
						}
					});
					if (this.payCostList.length > 0) {
						this.showPayCost = true;
					} else {
						uni.$u.toast("暂无可缴纳费用");
					}
				});
			},
			//新增费用
			addCost(item) {
				this.customCost.chargeProjectName = "";
				this.customCost.unitPrice = "";
				this.customCost.number = "1";
				this.showPopCost = !this.showPopCost;
				this.currentOrderNo = item.orderNo;
			},
			//确定提交费用项
			commitCost() {
				if (uni.$u.test.isEmpty(this.customCost.chargeProjectName)) {
					uni.$u.toast("请输入费用项名称");
					return;
				} else if (uni.$u.test.isEmpty(this.customCost.unitPrice)) {
					uni.$u.toast("请输入单价");
					return;
				} else if (uni.$u.test.isEmpty(this.customCost.number)) {
					uni.$u.toast("请输入数目");
					return;
				} else if (this.customCost.number == "0") {
					uni.$u.toast("数目不能为0,请重新输入");
					return;
				} else {
					this.customCost.chargeMoney = this.customCost.number * this.customCost.unitPrice;
					api
						.addNewExpenses({
							orderNo: this.currentOrderNo,
							chargeItemsVo: [this.customCost],
						})
						.then((res) => {
							uni.showToast({
								title: "新增费用成功",
							});
							this.showPopCost = false;
						});
				}
			},
			//费用缴纳
			changeCostItem(item) {
				this.payCostList.map((costItem) => {
					costItem.selected = false;
				});
				item.selected = true;
				this.currentPayItem = item;
				this.$forceUpdate();
			},
			confimPayFee() {
				this.showPayCost = false;
				if (this.currentPayItem) {
					uni.navigateTo({
						url:
							"/order/shortOrder/orderPayFee?type=" +
							this.currentPayItem.type +
							"&orderNo=" +
							this.currentOrderNo,
					});
				} else {
					uni.$u.toast("请选择需要缴纳的费用项");
				}
			},

			sourceClick(index) {
				this.sourceName = this.sourceList[index].dictLabel;
				this.orderSource = this.sourceList[index].dictValue;
				this.sourceList.forEach((item, i) => {
					item.check = i === index;
				});

				this.showStatus = false;
				this.$forceUpdate();
				this.mescroll.triggerDownScroll();
			},

			getSourceName(value) {
				const obj = this.sourceList.find((item) => value == item.dictValue);
				if (obj) {
					return obj.dictLabel;
				} else {
					return "";
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.topWrapper {
		background-color: #fff;

		.searchBox {
			padding: 20upx;
			display: flex;
			align-items: center;
			// background-color: #fff;
			background: linear-gradient(90deg, #3599ff 0%, #0275ed 100%);

			.city {
				font-size: 28rpx;
				font-weight: bold;
				color: #fff;
			}

			.search {
				flex: 1;
				padding: 0 20upx;
				margin: 0 20upx;
				height: 70upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24upx;
				background-color: #ffffff;
				border-radius: 35rpx;
			}
		}
	}

	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8rpx;
		margin: 10rpx 20rpx;
		padding-bottom: 10rpx;
	}

	.title {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
		white-space: nowrap;
	}

	.order-source {
		font-size: 22rpx;
		padding: 2rpx 5rpx;
		color: #00bfbf;
		border-radius: 8rpx;
		border: 1rpx solid #00bfbf;
		margin-left: 5rpx;
		white-space: nowrap;
	}

	.text-warn {
		font-size: 24rpx;
		color: red;
		margin-right: 20rpx;
		white-space: nowrap;
	}

	.text-warn-orange {
		color: yellow;
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}

	.end-time {
		color: #ff6600;
		width: 300rpx;
		font-size: 24rpx;
	}

	.start-time {
		color: #ff001d;
		width: 300rpx;
		font-size: 24rpx;
		margin-right: 30rpx;
	}

	.title-box {
		/deep/ .u-icon {
			display: inline-block !important;
		}
	}

	.payCostItem {
		height: 80rpx;
		width: 600rpx;
		border-bottom: 1rpx solid #ededed;
	}

	.alertBtn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #1673ff;
		color: #fff;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.commitBtn {
		background-color: #1673ff;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		width: 300rpx;
		margin-top: 30rpx;
	}

	.filterPop {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999999999;

		.filterContent {
			background-color: #ffffff;
			padding-top: 20rpx;

			.filter-title {
				font-size: 28rpx;
				color: #333;
				margin: 23rpx 20rpx;
			}

			.filter-content {
				margin-left: 43rpx;
				display: flex;
				flex-wrap: wrap;
			}

			.filter-item {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 8rpx;
				font-size: 28rpx;
				background-color: #efefef;
				color: #666666;
				margin: 0 30rpx 23rpx 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				&.active {
					color: #fff;
					background-color: #1673ff;
				}
			}

			.filter-bottom {
				height: 68rpx;
				display: flex;
				margin: 34rpx 46rpx;
				background-color: #1673ff;
				box-sizing: border-box;
				border-radius: 8rpx;

				.cancel {
					flex: 1;
					text-align: center;
					line-height: 68rpx;
					color: #1673ff;
					background-color: #ffffff;
					margin: 2rpx;
					border-radius: 8rpx;
				}

				.confirm {
					flex: 1;
					text-align: center;
					line-height: 68rpx;
					color: #ffffff;
				}
			}
		}
	}

	.text-value-order {
		font-size: 28rpx;
		color: #333;
		margin-left: 10rpx;
		width: 500rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 这里是超出几行省略 */
		overflow: hidden;
	}
</style>
